<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.customer_id"
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.product_id"
                @change="product_id_change"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker
                v-model="order_data"
                @change="order_data_change"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn">查询</el-button>
          <el-button @click="searchreset" class="add_btn">重置</el-button>
          <el-button @click="search(2)" class="add_btn">导出</el-button>
          <el-button @click="tuihuo" class="add_btn">新增退货</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table
      :data="dataList"
      stripe
      v-loading="loading"
      style="width: 100%"
      border
    >
      <!-- <el-table-column type="selection"> </el-table-column> -->

      <el-table-column prop="id" label="ID" width="60"> </el-table-column>
      <el-table-column prop="order_id" label="订单ID" width="100">
      </el-table-column>

      <el-table-column label="订单号">
        <template slot-scope="scope">
          {{ scope.row.order.order_number }}
        </template>
      </el-table-column>
      <el-table-column label="流水号">
        <template slot-scope="scope">
          {{ scope.row.order.serial_number }}
        </template>
      </el-table-column>

      <el-table-column label="产品名称">
        <template slot-scope="scope">
          {{
            scope.row.order.product_name
              ? scope.row.order.product_name.product_name
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="产品型号">
        <template slot-scope="scope">
          {{
            scope.row.order.model_number_name
              ? scope.row.order.model_number_name.model_number
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column label="规格">
        <template slot-scope="scope">
          {{
            scope.row.order.specification
              ? scope.row.order.specification.specification
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="颜色">
        <template slot-scope="scope">
          {{ scope.row.order.color ? scope.row.order.color.color : "" }}
        </template>
      </el-table-column>
      <el-table-column label="退货位置" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.returned_position == 1">成品库</span>
          <span v-if="scope.row.returned_position == 2">维修库</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.row.order.remark }}
        </template>
      </el-table-column>
      <el-table-column
        label="退货时间"
        prop="returned_time"
        :formatter="formatterTime"
      >
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="退货列表" :visible.sync="is_huanhuo" width="65%">
      <div class="ser_div">
        <el-row>
          <el-col>
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 订单号 </el-col>
              <el-col :span="16">
                <el-input v-model="sers.order_number" type="number"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 流水号 </el-col>
              <el-col :span="16">
                <el-input v-model="sers.serial_number"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" st yle="text-align: center"> 客户 </el-col>
              <el-col :span="16">
                <el-select
                  filterable
                  v-model="sers.customer_id"
                  placeholder="请选择客户"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in CustomerList"
                    :key="index"
                    :label="item.customer_name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-button @click="get_DeliveredOrderList" class="add_btn"
              >查询</el-button
            >
            <el-button @click="searchreset" class="add_btn">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="dataLists"
        v-loading="loadings"
        style="width: 100%"
        border
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.semi_finish_product">
              <el-table-column label="产品类型" width="150">
                <template slot-scope="prop">
                  <span>{{
                    prop.row.models ? prop.row.models.modelname : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产品" width="150">
                <template slot-scope="prop">
                  <span>{{
                    prop.row.product ? prop.row.product.product_name : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="型号" width="150">
                <template slot-scope="prop">
                  <span>{{
                    prop.row.model_number
                      ? prop.row.model_number.model_number
                      : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="规格" width="150">
                <template slot-scope="prop">
                  <span>{{
                    prop.row.specification
                      ? prop.row.specification.specification
                      : ""
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="颜色" width="150">
                <template slot-scope="prop">
                  <span>{{ prop.row.color ? prop.row.color.color : "" }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column label="数量" width="150">
                <template slot-scope="prop">
                  <span>{{
                    prop.row.num ? prop.row.num: ""
                  }}</span>
                </template>
              </el-table-column> -->
              
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60"> </el-table-column>
        <el-table-column prop="order_id" label="订单ID" width="60">
        </el-table-column>
        <el-table-column label="客户名称" width="80">
          <template slot-scope="scope">
            {{
              scope.row.order.customer
                ? scope.row.order.customer.customer_name
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="订单号" width="70">
          <template slot-scope="scope">
            {{ scope.row.order.order_number }}
          </template>
        </el-table-column>
        <el-table-column label="流水号" width="70">
          <template slot-scope="scope">
            {{ scope.row.order.serial_number }}
          </template>
        </el-table-column>

        <el-table-column label="产品名称" width="80">
          <template slot-scope="scope">
            {{
              scope.row.order.product_name
                ? scope.row.order.product_name.product_name
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="产品型号" width="80">
          <template slot-scope="scope">
            {{
              scope.row.order.model_number_name
                ? scope.row.order.model_number_name.model_number
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="规格" width="70">
          <template slot-scope="scope">
            {{
              scope.row.order.specification
                ? scope.row.order.specification.specification
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="颜色" width="70">
          <template slot-scope="scope">
            {{ scope.row.order.color ? scope.row.order.color.color : "" }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="150">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="备注" width="120">
          <template slot-scope="scope">
            {{ scope.row.order.remark }}
          </template>
        </el-table-column>
        <el-table-column prop="logistics_status" label="发货状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.logistics_status == 1" style="color: #dd8211"
              >待发货</span
            >
            <span v-if="scope.row.logistics_status == 2" style="color: #f1420d"
              >未发货</span
            >
            <span v-if="scope.row.logistics_status == 4" style="color: #b47425"
              >部分待发货</span
            >
            <span v-if="scope.row.logistics_status == 5" style="color: #b47425"
              >部分未发货</span
            >
            <span v-if="scope.row.logistics_status == 3" style="color: #0ca747"
              >已发货</span
            >
          </template>
        </el-table-column>
        <el-table-column label="发货时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.delivery_time }}
          </template>
        </el-table-column>
        <el-table-column label="物流信息" width="120">
          <template slot-scope="scope">
            {{ scope.row.logistics_info }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="tuihuo_add(scope.row.id, scope.row.order_id)"
              type="text"
              >退货</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_huanhuo = false">取 消</el-button>
        <el-button type="primary" @click="is_huanhuo = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="is_addreturn" width="30%" @close="tui_huan_change">
      <el-form
        label-width="100px"
        ref="ruleForm"
        :model="add_return"
        :rules="rules"
      >
        <el-form-item label="订单ID" v-if="title == '新增退货'">
          {{ add_return.order_id }}
        </el-form-item>
        <el-form-item
          label="退货时间"
          prop="returned_time"
          v-if="title == '新增退货'"
        >
          <el-date-picker
            v-model="add_return.returned_time"
            value-format="yyyy-MM-dd"
            align="right"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
     
        <el-form-item
          label="退货位置"
          prop="returned_position"
          v-if="title == '新增退货'">
          <el-select
            v-model="add_return.returned_position"
            placeholder="请选择"
          >
            <el-option
              v-for="item in returned_positionlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
       
        <el-form-item label="备注">
          <el-input
            style="width: 80%"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="add_return.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="is_addreturn = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="title == '新增退货'"
          @click="add_returns('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getFinishProductList,
  getCustomerList,
  getModelNumberList,
  getProductList,
  getFinishProductList_exports,
  addReturnedGoods,
  getDeliveredOrderList,
  getReturnedGoodsList,
  getInventoryCount,
  exchangeGoods
} from "@/api/product/index";
export default {
  inject: ["refresh"],
  data() {
    return {
      title:"",
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      returned_positionlist: [
        {
          value: 1,
          label: "成品库",
        },
        {
          value: 2,
          label: "维修库",
        },
      ],
      loadings: false,
      is_addreturn: false,
      logistics_statuslist: [
        {
          status: 1,
          lable: "待发货",
        },
        {
          status: 2,
          lable: "未发货",
        },
        {
          status: 4,
          lable: "部分待发货",
        },
        {
          status: 5,
          lable: "部分未发货",
        },
      ],
      ModelNumberLists: [],
      ModelNumberList: [],
      ser: {
        serial_number: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      },
      sers: {
        serial_number: "",
        order_number: "",
        customer_id: "",
      },
      loading: true,
      dataList: [],
      dataLists: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      pagination_diao: {
        per_page: 10,
        page: 1,
      },
      CustomerList: [],
      productList: [],
      order_data: [],
      is_huanhuo: false,
      add_return: {
        order_id: "",
        remark: "",
        returned_position: "",
        returned_time: "",
        finish_id: "",
        semi_id: "",
        exchange_time: "",
      },
      rules: {
        returned_position: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        returned_time: [
          { required: true, message: "请选择活时间", trigger: "blur" },
        ],
        exchange_time: [
          { required: true, message: "请选择活时间", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getlist();
    this.getproduct();
    this.getModel();
    this.getCustomer();
  },
  methods: {
    tui_huan_change(){
      this.add_return={
        order_id: "",
        remark: "",
        returned_position: "",
        returned_time: "",
        finish_id: "",
        semi_id: "",
        exchange_time: "",
      }
    },
    huanhuo_add(id, id_1, id_2, id_3, id_4) {
      let obj = {
        product_id: id_1 ? id_1 : "",
        model_number_id: id_2 ? id_2 : "",
        color_id: id_3 ? id_3 : "",
        specification_id: id_4 ? id_4 : "",
      };
      getInventoryCount(obj).then((res) => {
        if (res.code == 200) {
          if (res.data == 0) {
            this.$message.error("暂无可换货产品");
          } else {
            this.is_addreturn = true;
            this.title = "新增换货";
            this.add_return.semi_id = id;
          }
        }
      });
    },
    add_huanhuos(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            remark: this.add_return.remark,
            exchange_time: this.add_return.exchange_time,
            semi_id: this.add_return.semi_id,
          };
          exchangeGoods(obj).then((res) => {
            if (res.code == 200) {
              this.add_return = {
                order_id: "",
                remark: "",
                returned_position: "",
                returned_time: "",
                finish_id: "",
                semi_id: "",
                exchange_time: "",
              };
              this.get_DeliveredOrderList() 
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add_returns(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addReturnedGoods(this.add_return).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              this.is_addreturn = false;
              this.add_return = {
                order_id: "",
                remark: "",
                returned_position: "",
                returned_time: "",
                finish_id: "",
                semi_id: "",
                exchange_time: "",
              };
              this.get_DeliveredOrderList()
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    tuihuo_add(ids, id) {
      this.add_return.finish_id = ids;
      this.add_return.order_id = id;
      this.is_addreturn = true;
      this.title = "新增退货";
    },
    get_DeliveredOrderList() {
      getDeliveredOrderList().then((res) => {
        if (res.code == 200) {
          this.dataLists = res.data.data;
          this.loadings = false;
        }
      });
    },
    tuihuo() {
      this.is_huanhuo = true;
      this.get_DeliveredOrderList();
    },
    handleSelectionChange(val) {
      this.dayinlist = val;
      this.dayinlist_biaoqian = val;
    },
    // 获取退货列表
    getlist() {
      getReturnedGoodsList({
        ...this.pagination,
        ...this.ser,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_producModel(val);
    },

    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getFinishProductList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      getFinishProductList_exports(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "成品库";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      };
      this.getlist();
    },
    //客户列表
    getCustomer() {
      getCustomerList({per_page:99999}).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },

    handleSizeChange_diao(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange_diao(val) {
      console.log(`当前页: ${val}`);
      this.pagination_diao.page = val;
      this.get_DeliveredOrderList();
    },
    prev_diao() {
      this.pagination_diao.page = this.pagination_diao.page - 1;
      this.get_DeliveredOrderList();
    },
    next_diao() {
      this.pagination_diao.page = this.pagination_diao.page + 1;
      this.get_DeliveredOrderList();
    },
  },
};
</script>

<style scoped>
.el-dropdown-menu {
  text-align: center;
}

.el-dropdown-menu .el-button--text {
  width: 100%;
}
</style>
